<template>
  <div class="bgc-e5e5e5 p-12 font-14 color-333" v-loading="loading">
    <div class="search">
      <el-form :inline="true" :model="formInline">
        <el-form-item>
          <el-radio-group v-model="tabPosition" @input="timeChange">
            <el-radio-button
              v-for="(row, index) in dateTab"
              :key="index"
              :label="row"
              >{{ row }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$i18n.t('mesProductionDailyClear.customTime')"
          label-width="110px"
        >
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="~"
            :start-placeholder="$i18n.t('mesProductionDailyClear.beginDate')"
            :end-placeholder="$i18n.t('mesProductionDailyClear.endDate')"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          :label="$i18n.t('mesProductionDailyClear.workshop')"
          label-width="70px"
        >
          <el-select
            v-model="formInline.workshopCode"
            :placeholder="
              $i18n.t('mesProductionDailyClear.pleaseSelectWorkshop')
            "
            @change="workshopSelect"
            filterable
          >
            <el-option
              v-for="item in workshopList"
              :key="item.modelingCode"
              :label="item.modelingName"
              :value="item.modelingCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$i18n.t('mesProductionDailyClear.line')"
          label-width="70px"
        >
          <el-select
            v-model="formInline.lineCode"
            :placeholder="$i18n.t('mesProductionDailyClear.selectLine')"
            filterable
          >
            <el-option
              v-for="item in lineList"
              :key="item.modelingCode"
              :label="item.modelingName"
              :value="item.modelingCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="searchSubmit"
            icon="el-icon-search"
            >{{ $i18n.t("common.search") }}</el-button
          >
          <el-button @click="resetSubmit" icon="el-icon-refresh">{{
            $i18n.t("common.reset")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bgc-fff">
      <production
        class="border-top-e5e5e5 mt-20 pt-20"
        :data-item="dataItem"
        :title-date="titleDate"
      />
      <div class="day-done-wrapper">
        <picking
          class="day-done-wrapper__item mt-36"
          :data-item="dataItemPick"
          :data-query="formInline"
        />
        <exception
          class="day-done-wrapper__item mt-36"
          :data-item="dataItemDefect"
          :data-query="formInline"
        />
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/report/mesProductionDailyClear";
import Production from "./components/production.vue";
import Picking from "./components/picking.vue";
import Exception from "./components/exception.vue";
import moment from "moment";
import { getLineCodeList, getLineCodeListNew } from "@/api/order/mesProdOrder";
export default {
  name: "mesProductionDailyClear",
  components: { Production, Picking, Exception },
  data() {
    return {
      tabPosition: $i18n.t("common.today"),
      dateTab: [
        $i18n.t("common.yesterday"),
        $i18n.t("common.today"),
        $i18n.t("common.thisWeek"),
        $i18n.t("mesProductionDailyClear.thisMonth"),
      ],
      value1: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
      formInline: {
        workshopCode: "",
        lineCode: "",
        beginDate: "",
        endDate: "",
      },
      type: 1,
      lineList: [], // 线体
      workshopList: [], //车间
      titleDate: "",
      dataItem: {},
      dataItemPick: {},
      dataItemDefect: {},
      loading: false,
    };
  },
  mounted() {},
  created() {
    this.formInline.beginDate = this.value1[0];
    this.formInline.endDate = this.value1[1];
    this.init();
  },
  methods: {
    searchSubmit() {
      this.formInline.beginDate = this.value1[0];
      this.formInline.endDate = this.value1[1];
      this.init();
    },
    resetSubmit() {
      this.formInline = {
        workshopCode: "",
        lineCode: "",
      };
      this.value1 = [
        moment().format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ];
      this.lineList = [];
      this.searchSubmit();
    },
    async init() {
      this.loading = true;
      try {
        this.getWorkshopData();
        await Promise.all([
          api.getProductAnalyze(this.formInline), // 生产情况
          api.getPickMaterialInfo(this.formInline), // 领料情况
          api.getDefectProdInfo(this.formInline), // 异常情况
        ]).then((res) => {
          this.dataItem = res[0].data.result || {};
          this.dataItemPick = res[1].data.result || {};
          this.dataItemDefect = res[2].data.result || {};
        });
      } finally {
        this.loading = false;
      }
    },
    // 获取车间
    async getWorkshopData() {
      try {
        const list = await getLineCodeListNew({
          modelingCode: this.$store.getters.factoryCode,
          level: 4,
          modelingType: "0",
        });
        this.workshopList = list.data.result || [];
      } catch (error) {
        console.error(error);
      }
    },
    async workshopSelect(val) {
      this.formInline.lineCode = "";
      const params = {
        level: 5,
        modelingCode: val,
      };
      const list = await getLineCodeList(params);
      this.lineList = list.data.result || [];
    },
    timeChange(val) {
      if (val == $i18n.t("common.yesterday")) {
        let timer = moment().subtract(1, "days").format("YYYY-MM-DD");
        this.value1 = [timer, timer];
      } else if (val == $i18n.t("common.today")) {
        this.value1 = [
          moment().format("YYYY-MM-DD"),
          moment().format("YYYY-MM-DD"),
        ];
      } else if (val == $i18n.t("common.thisWeek")) {
        let startWeek = moment().startOf("isoWeek").format("YYYY-MM-DD");
        let endWeek = moment().endOf("isoWeek").format("YYYY-MM-DD");
        this.value1 = [startWeek, endWeek];
      } else {
        let startMonth = moment().startOf("month").format("YYYY-MM-DD");
        let endMonth = moment().endOf("month").format("YYYY-MM-DD");
        this.value1 = [startMonth, endMonth];
      }
    },
  },
};
</script>
<style lang="scss">
@import "../../mind/css/common.scss";

.border-top-e5e5e5 {
  border-top: 0px solid rgb(229, 229, 229);
}

.content-between {
  display: flex;
  justify-content: space-between;
}

.day-done-wrapper {
  display: flex;
  justify-content: space-between;

  &__item {
    width: calc(50% - 24px);
  }
}
</style>
